<template>
  <i class="merak-icon" :style="style" @click="!disabled && emit('click')">
    <slot />
  </i>
</template>

<script setup lang="ts">
import type { CSSProperties } from "vue";

import { toRefs, computed } from "vue";

const props = defineProps<{
  size?: number | string;
  color?: CSSProperties["color"];
  pointer?: boolean;
  disabled?: boolean;
}>();

const emit = defineEmits<{
  click: [];
}>();

const { size, color, pointer, disabled } = toRefs(props);

const style = computed(() => {
  const payload: CSSProperties = {};
  if (typeof size.value === "number" || (typeof size.value === "string" && /^\d+$/.test(size.value))) {
    payload.fontSize = `${size.value}px`;
  } else if (!!size.value) {
    payload.fontSize = size.value;
  }
  if (!!color.value) {
    payload.color = color.value;
  }
  if (pointer.value) {
    payload.cursor = "pointer";
  }
  if (disabled.value) {
    payload.opacity = 0.5;
    payload.cursor = "no-drop";
  }
  return payload;
});

defineOptions({
  name: "MerakIcon"
});
</script>

<style lang="scss">
.merak-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  & > * {
    width: 1em;
    height: 1em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
